<template>
  <!-- 待办事项列表容器 -->
  <div class="todo-list">
    <h1>待办事项</h1>

    <!-- 添加待办事项表单 -->
    <form @submit.prevent="handleSubmit" class="todo-form">
      <input v-model="newTodo" type="text" placeholder="添加新的待办事项" class="todo-input" />
      <button type="submit" class="add-button">添加</button>
    </form>

    <!-- 过滤按钮组 -->
    <div class="filters">
      <button
        v-for="filter in filters"
        :key="filter.value"
        @click="setFilter(filter.value)"
        :class="{ active: currentFilter === filter.value }"
      >
        {{ filter.label }}
      </button>
    </div>

    <!-- 待办事项列表 -->
    <ul class="todo-items">
      <TodoItem
        v-for="todo in filteredTodos"
        :key="todo.id"
        :todo="todo"
        @toggle="toggleTodo"
        @delete="deleteTodo"
        @update="handleTodoUpdate"
      />
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useTodoStore } from '../stores/todoStore';
import TodoItem from '../components/TodoItem.vue';

// 使用Pinia store
const todoStore = useTodoStore();
// 新待办事项输入框的值
const newTodo = ref('');

// 过滤选项配置
const filters = [
  { label: '全部', value: 'all' },
  { label: '进行中', value: 'active' },
  { label: '已完成', value: 'completed' },
];

// 计算当前过滤条件
const currentFilter = computed(() => todoStore.filter);
// 计算过滤后的待办事项列表
const filteredTodos = computed(() => todoStore.filteredTodos);

/**
 * 处理表单提交
 * 添加新的待办事项
 */
const handleSubmit = () => {
  if (newTodo.value.trim()) {
    todoStore.addTodo(newTodo.value.trim());
    newTodo.value = '';
  }
};

/**
 * 切换待办事项的完成状态
 * @param {number} id - 待办事项ID
 */
const toggleTodo = (id) => {
  todoStore.toggleTodo(id);
};

/**
 * 删除待办事项
 * @param {number} id - 待办事项ID
 */
const deleteTodo = (id) => {
  todoStore.deleteTodo(id);
};

/**
 * 设置过滤条件
 * @param {string} filter - 过滤条件
 */
const setFilter = (filter) => {
  todoStore.setFilter(filter);
};

/**
 * 处理待办事项更新
 * @param {Object} updatedTodo - 更新后的待办事项对象
 */
const handleTodoUpdate = (updatedTodo) => {
  console.log('待办事项已更新:', updatedTodo);
  // 这里可以根据需要添加额外的处理逻辑
};
</script>

<style scoped>
/* 待办事项列表容器样式 */
.todo-list {
  max-width: 600px;
  margin: 0 auto;
}

/* 表单样式 */
.todo-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

/* 输入框样式 */
.todo-input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 添加按钮样式 */
.add-button {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 过滤按钮组样式 */
.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

/* 过滤按钮样式 */
.filters button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

/* 激活的过滤按钮样式 */
.filters button.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
}

/* 待办事项列表样式 */
.todo-items {
  list-style: none;
  padding: 0;
}

/* 待办事项项样式 */
.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

/* 已完成待办事项样式 */
.completed {
  text-decoration: line-through;
  color: #999;
}

/* 删除按钮样式 */
.delete-button {
  margin-left: auto;
  padding: 4px 8px;
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
